<template>
	<view>
		<!-- 发布弹窗 -->
		<uv-popup ref="popupRef" mode="center" :close-on-click-overlay="false" :zIndex="99999" round="20rpx" bgColor="none">
			<view class="popup2">
				<view class="popup-main">
					<view class="flex justify-content">
						<view class="popup-item" @click="path(`/pages/release/supply`)">
							<image src="@/static/icon/popup1.png" mode=""></image>
							<view>发布供应</view>
						</view>
						<view class="popup-item" @click="path(`/pages/release/purchase`)">
							<image src="@/static/icon/popup2.png" mode=""></image>
							<view>发布求购</view>
						</view>
						<view class="popup-item" @click="path(`/pages/release/process`)">
							<image src="@/static/icon/popup3.png" mode=""></image>
							<view>发布清地</view>
						</view>
					</view>
				</view>
				<uv-icon class="popup-close" @click="closePopup" name="close-circle" color="#FFFFFF"
					size="28"></uv-icon>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		ref,
	} from 'vue'
	// 弹窗引用
	const popupRef = ref(null);
	
	// 关闭弹窗
	const closePopup = () => {
	  if (popupRef.value) {
	    popupRef.value.close();
	  }
	};
	
	// 打开弹窗
	const openPopup = () => {
	  if (popupRef.value) {
	    popupRef.value.open();
	  }
	};
	const path = (e) => {
		uni.navigateTo({
			url: e
		})
	}
	
	// 暴露方法给父组件
	defineExpose({
	  open: openPopup,
	  close: closePopup
	});
</script>

<style scoped lang="scss">
	.popup2 {
		width: 600rpx;
		.popup-main {
			width: 100%;
			height: 260rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			padding: 54rpx 66rpx;
			box-sizing: border-box;
		}
		.popup-item {
			font-size: 24rpx;
			color: #666666;
			image {
				width: 100rpx;
				height: 100rpx;
				margin-bottom: 20rpx;
			}
		}
		.popup-close {
			display: flex;
			justify-content: center;
			margin-top: 60rpx;
		}
	}
</style>